@import "./base.scss";

html,
body {
    height: 100%;
    width: 100%;
}

//这是scss的注释,它不会被输出到 .css里
/**
这种注释,会被输出 .css里
**/

//这是sass的变量,使用 $
$tmpColor:red;

// 后代关系
.box {
    height: 200px;
    width: 200px;
    border: 1px solid #000;
    background-color: pink;


    //后代选择器
    .inner {
        width: 10px;
    }

    //子代选择器
    >.mybox {
        border: 1px solid #000;
    }

    &.aa {
        border: 1px solid #000;
    }

    // 伪元素
    &:before {
        border: 1px solid #000;
    }
}

// 计算功能
.bbb {
    border: (400px/2);
}

//继承
.ccc {
    height: 200px;
    //想拥有前面的哪个类样式,就继承哪个类样式
    @extend .bbb
}

//Mixin 混合

@mixin ddd {
    border: 1px solid green;
}

.fff {
    height: 200px;
    @include ddd;
    //lighten 亮度调整到100%
    color: lighten(#cc3, 10%);
    background-color: $mycolor1;
}

//高级用法


p {
    @if 1==2 {
        border: 1px;
    }

    @else {
        border: 2px
    }

}

// 0-9  
@for $i from 0 to 10 {
    .abc-#{$i} {
        border: 1px solid #000;
    }
}

//0-10
@for $j from 0 through 10 {
    .item-#{$j} {
        border: 1px solid #000;
    }
}


//自定义函数
@function test($colorA) {
    @return $colorA *2;
}


.zzz {
    height: test(200px);
}